<template>
    <page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')">
        <view v-if="hasgoods && islogin"
            ><view v-for="(item, index) in pageCart" :key="index + item.id" style="position: relative">
                <view>
                    <movable-area>
                        <movable-view
                            direction="horizontal"
                            :out-of-bounds="true"
                            :damping="30"
                            :friction="5"
                            :inertia="true"
                            :x="activeIndex == index ? itemTransLateX : 0"
                            @touchstart="itemTouchStart($event, index)"
                            @touchend="itemTouchEnd($event, index)"
                            @vtouchmove="() => {}"
                            @tap="goDetail(item)">
                            <view class="carpage_goods bg" v-if="hasgoods && islogin">
                                <view class="carpage_square">
                                    <div
                                        style="height: 200rpx; line-height: 200rpx"
                                        @touchstart.stop="choose(index)"
                                        @touchmove.stop
                                        @touchend.stop>
                                        <checkbox
                                            value="item.checked"
                                            :checked="item.checked"
                                            style="transform: scale(0.7)"
                                            color="#FE292B"
                                            :disabled="
                                                [2, 3].includes(item.onSale) || !item.skuStock || item.isDelete == 1
                                            "
                                            class="checkbox round red" />
                                    </div>
                                    <view class="img_square"
                                        ><img
                                            class="carpage_img"
                                            :src="item.coverSrc || defaultImg"
                                            :lazy-load="true"
                                            @error="imageError(index)" /><view
                                            class="img_logo"
                                            v-if="item.onSale != 1 || !item.skuStock || item.isDelete == 1"
                                            >商品已失效</view
                                        ></view
                                    >
                                    <view class="carpage_detail">
                                        <view class="carpage_foodname">{{ item.goodsName }}</view>
                                        <view
                                            v-if="item.onSale == 1 && item.skuStock && item.isDelete == 2"
                                            class="carpage_stylechoose"
                                            @touchmove.stop
                                            @touchend.stop
                                            @tap.stop="openDialog(item)"
                                            ><text class="carpage_text">{{ item.skuSpecValue }}</text
                                            ><img
                                                class="carpage_jintou"
                                                :src="getImgOssUrl('/ui-prod-2.0.0/jiantou_1.2.png')" />
                                        </view>
                                        <view class="carpage_count">
                                            <view
                                                class="carpage_color"
                                                v-if="item.onSale == 1 && item.skuStock && item.isDelete == 2">
                                                <text class="price-qian">￥</text
                                                ><text class="carpage_money">{{
                                                    floatDivide(item.skuPrice, 100).toString().indexOf('.') != -1
                                                        ? floatDivide(item.skuPrice, 100).toString().split('.')[0]
                                                        : floatDivide(item.skuPrice, 100)
                                                }}</text
                                                ><text
                                                    class="price-dian"
                                                    v-if="
                                                        floatDivide(item.skuPrice, 100).toString().indexOf('.') != -1
                                                    ">
                                                    {{
                                                        '.' + floatDivide(item.skuPrice, 100).toString().split('.')[1]
                                                    }}</text
                                                >
                                            </view>
                                            <text
                                                class="carpage_item"
                                                v-if="item.onSale != 1 || !item.skuStock || item.isDelete == 1"
                                                >请重新选择商品规格</text
                                            >
                                            <button
                                                v-if="item.onSale != 1 || !item.skuStock || item.isDelete == 1"
                                                class="carpage_btn"
                                                @touchmove.stop
                                                @touchend.stop
                                                @tap.stop="openDialog(item)">
                                                重选
                                            </button>
                                            <ShopingGoodsSteps
                                                v-if="item.onSale == 1 && item.skuStock && item.isDelete == 2"
                                                @AddShoppingList="AddShoppingList($event, index)"
                                                :num="item.quantity"
                                                :maxQuantity="item.skuStock"
                                        /></view>
                                    </view>
                                </view> </view
                        ></movable-view>
                    </movable-area>
                </view>

                <view class="del"
                    ><view class="delicon" @touchmove.stop @touchend.stop @touchstart.stop="delGoods(item, index)"
                        ><img class="iconimg" :src="getImgOssUrl('/ui-prod-2.0.0/delgoods_1.2.png')" /><text
                            class="icontext"
                            >删除</text
                        ></view
                    ></view
                >
            </view></view
        >

        <view class="loading" v-if="hasgoods && islogin">
            <text>{{
                isBottom
                    ? loading.status === 'loading'
                        ? loading.contentText.contentrefresh
                        : loading.contentText.contentnomore
                    : ''
            }}</text>
        </view>
        <view class="search_no" v-if="!hasgoods && islogin">
            <img class="no_img" :src="getImgOssUrl('/ui-prod-2.0.0/nodata_1.1.png')" /><text class="no_title"
                >您的购物车居然是空的</text
            ><text class="no_title">快去挑好货吧</text></view
        >
        <view class="search_no" v-if="!islogin">
            <img class="denglu" :src="getImgOssUrl('/ui-prod-2.0.0/denglu_2.0.png')" /><text class="denglu_title"
                >您的购物车居然是空的</text
            ><button @click="router.push('/pages-user/login/index')" class="btnshop" style="margin: 42rpx 0 0 0">
                去登录
            </button></view
        >
        <!-- 购物付款操作栏  -->
        <view class="tab" v-if="!show && islogin"
            ><view class="carpage_bottom"
                ><view
                    ><checkbox
                        :checked="operateParam.checked"
                        color="#FE292B"
                        class="round red"
                        @touchmove.stop
                        @touchend.stop
                        @click="allChoose"
                        style="transform: scale(0.7)" /><text class="label space">全选</text></view
                ><view class="carpage_bottom" style="padding: 0"
                    ><text class="label">总价</text>
                    <view class="carpage_color">
                        <text class="price-qian">￥</text
                        ><text class="carpage_allcount">{{
                            operateParam.allMoney.toString().indexOf('.') != -1
                                ? operateParam.allMoney.toString().split('.')[0]
                                : operateParam.allMoney
                        }}</text
                        ><text class="price-dian" v-if="operateParam.allMoney.toString().indexOf('.') != -1">
                            {{ '.' + operateParam.allMoney.toString().split('.')[1] }}</text
                        >
                    </view>
                    <view
                        ><button @click="toDetail" :class="[hasChoose ? 'btnshop' : 'btnshop disabled']">
                            立即购买
                        </button></view
                    ></view
                ></view
            ></view
        >
    </page-meta>
    <br />
    <!-- <movable-area>
        <movable-view class="max" out-of-bounds direction="horizontal">text</movable-view>
    </movable-area> -->
    <!-- <page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"> -->
    <!-- <view class="carpage">
            <view class="carpage_goods bg" v-if="hasgoods && islogin">
                <view
                    v-for="(item, index) in pageCart"
                    :key="index + item.id"
                    class="carpage_square"
                    @touchstart="itemTouchStart($event, index)"
                    @touchend="itemTouchEnd($event, index)"
                    @tap="goDetail(item)"
                    :style="{
                        transform:
                            activeIndex === index && itemTransLateX ? 'translateX( ' + itemTransLateX + 'rpx)' : 0,
                        transition: 'all 0.4s'
                    }">
                    <div
                        style="height: 200rpx; line-height: 200rpx"
                        @touchstart.stop="choose(index)"
                        @touchmove.stop
                        @touchend.stop>
                        <checkbox
                            value="item.checked"
                            :checked="item.checked"
                            style="transform: scale(0.7)"
                            color="#FE292B"
                            :disabled="[2, 3].includes(item.onSale) || !item.skuStock || item.isDelete == 1"
                            class="checkbox round red" />
                    </div>
                    <view class="img_square"
                        ><img
                            class="carpage_img"
                            :src="item.coverSrc || defaultImg"
                            :lazy-load="true"
                            @error="imageError(index)" /><view
                            class="img_logo"
                            v-if="item.onSale != 1 || !item.skuStock || item.isDelete == 1"
                            >商品已失效</view
                        ></view
                    >
                    <view class="carpage_detail">
                        <view class="carpage_foodname">{{ item.goodsName }}</view>
                        <view
                            v-if="item.onSale == 1 && item.skuStock && item.isDelete == 2"
                            class="carpage_stylechoose"
                            @touchmove.stop
                            @touchend.stop
                            @tap.stop="openDialog(item)"
                            ><text class="carpage_text">{{ item.skuSpecValue }}</text
                            ><img class="carpage_jintou" :src="getImgOssUrl('/ui-prod-2.0.0/jiantou_1.2.png')" />
                        </view>
                        <view class="carpage_count">
                            <view class="carpage_color" v-if="item.onSale == 1 && item.skuStock && item.isDelete == 2">
                                <text class="price-qian">￥</text
                                ><text class="carpage_money">{{
                                    floatDivide(item.skuPrice, 100).toString().indexOf('.') != -1
                                        ? floatDivide(item.skuPrice, 100).toString().split('.')[0]
                                        : floatDivide(item.skuPrice, 100)
                                }}</text
                                ><text
                                    class="price-dian"
                                    v-if="floatDivide(item.skuPrice, 100).toString().indexOf('.') != -1">
                                    {{ '.' + floatDivide(item.skuPrice, 100).toString().split('.')[1] }}</text
                                >
                            </view>
                            <text class="carpage_item" v-if="item.onSale != 1 || !item.skuStock || item.isDelete == 1"
                                >请重新选择商品规格</text
                            >
                            <button
                                v-if="item.onSale != 1 || !item.skuStock || item.isDelete == 1"
                                class="carpage_btn"
                                @touchmove.stop
                                @touchend.stop
                                @tap.stop="openDialog(item)">
                                重选
                            </button>
                            <ShopingGoodsSteps
                                v-if="item.onSale == 1 && item.skuStock && item.isDelete == 2"
                                @AddShoppingList="AddShoppingList($event, index)"
                                :num="item.quantity"
                                :maxQuantity="item.skuStock"
                        /></view>
                    </view>
                    <view
                        v-if="activeIndex === index && itemTransLateX"
                        @touchstart.stop
                        @touchmove.stop
                        @touchend.stop
                        class="del"
                        :style="{
                            top: 0,
                            right: itemTransLateX ? '-144rpx' : 0,
                            width: itemTransLateX ? '144rpx' : 0
                        }"
                        ><view class="delicon" @touchmove.stop @touchend.stop @touchstart.stop="delGoods(item)"
                            ><img class="iconimg" :src="getImgOssUrl('/ui-prod-2.0.0/delgoods_1.2.png')" /><text
                                class="icontext"
                                >删除</text
                            ></view
                        ></view
                    >
                </view>
            </view>
            <view class="loading" v-if="hasgoods && islogin">
                <text>{{
                    isBottom
                        ? loading.status === 'loading'
                            ? loading.contentText.contentrefresh
                            : loading.contentText.contentnomore
                        : ''
                }}</text>
            </view>
            <view class="search_no" v-if="!hasgoods && islogin">
                <img class="no_img" :src="getImgOssUrl('/ui-prod-2.0.0/nodata_1.1.png')" /><text class="no_title"
                    >您的购物车居然是空的</text
                ><text class="no_title">快去挑好货吧</text></view
            >
            <view class="search_no" v-if="!islogin">
                <img class="denglu" :src="getImgOssUrl('/ui-prod-2.0.0/denglu_2.0.png')" /><text class="denglu_title"
                    >您的购物车居然是空的</text
                ><button @click="router.push('/pages-user/login/index')" class="btnshop" style="margin: 42rpx 0 0 0">
                    去登录
                </button></view
            >
        </view> -->
    <!-- 购物付款操作栏  -->
    <!-- <view class="tab" v-if="!show && islogin"
            ><view class="carpage_bottom"
                ><view
                    ><checkbox
                        :checked="operateParam.checked"
                        color="#FE292B"
                        class="round red"
                        @touchmove.stop
                        @touchend.stop
                        @click="allChoose"
                        style="transform: scale(0.7)" /><text class="label space">全选</text></view
                ><view class="carpage_bottom" style="padding: 0"
                    ><text class="label">总价</text>
                    <view class="carpage_color">
                        <text class="price-qian">￥</text
                        ><text class="carpage_allcount">{{
                            operateParam.allMoney.toString().indexOf('.') != -1
                                ? operateParam.allMoney.toString().split('.')[0]
                                : operateParam.allMoney
                        }}</text
                        ><text class="price-dian" v-if="operateParam.allMoney.toString().indexOf('.') != -1">
                            {{ '.' + operateParam.allMoney.toString().split('.')[1] }}</text
                        >
                    </view>
                    <view
                        ><button @click="toDetail" :class="[hasChoose ? 'btnshop' : 'btnshop disabled']">
                            立即购买
                        </button></view
                    ></view
                ></view
            ></view
        > -->
    <!-- </page-meta> -->

    <uni-popup ref="popup" :safe-area="false" @change="change">
        <view class="popup-content">
            <view class="pop_cancel" @click.stop="close">
                <img class="pop_logo" :src="getImgOssUrl('/ui-prod-2.0.0/cancel_1.1.png')"
            /></view>
            <skupop
                :goodsId="props.goodsId"
                :goodsNo="props.goodsNo"
                :specValueList="props.specValueList"
                :skuId="props.skuId"
                :coverSrc="props.coverSrc"
                :quantity="props.quantity"
                :cartId="props.cartId"
                :isvalid="props.isvalid"
                :show="show"
                @popup="popup.open('bottom')"
                @close="close"
                @updata="updata"
        /></view>
    </uni-popup>
    <el-loading></el-loading>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import { onReachBottom, onPullDownRefresh, onShow, onPageScroll } from '@dcloudio/uni-app';
import request from '@/request';
import router from '@/router';
import ShopingGoodsSteps from '@/components/shopingGoodsSteps';
import skupop from '@/components/skupop';
import { checkToken, floatDivide, getImgOssUrl } from '@/commons/utils';
import { useTrace } from '@/commons/trace';
const defaultImg = ref(getImgOssUrl('/ui-prod-2.0.0/errorImg.png'));
const { traceReport } = useTrace({ autoLoad: true });
const props = reactive({ goodsId: '', goodsNo: '', specValueList: {}, coverSrc: '' });
let activeIndex = ref('');
let startX = ref(0);
let startY = ref(0);
let itemTransLateY = ref(0);
let itemTransLateX = ref(0);
let show = ref(false);
let scrollTop = ref(0);
let hasgoods = ref(false);
const pageCart = ref();
let hasMore = ref(1);
let islogin = ref(true);
const popup = ref();
let hasChoose = ref(false);
let pageCount = ref(8);
let total = ref(0);
//判断是否有已经左滑的商品
let isscroll = ref(false);
const loading = reactive({
    status: 'loading', // 默认展示上拉显示更多
    contentText: {
        contentrefresh: '加载中…',
        contentnomore: '已经到底啦！'
    }
});
/** 付款栏数据*/
const operateParam = reactive({ allMoney: 0, checked: false });
// 购物车列表数据
const cartList = ref([]);
onShow(async () => {
    islogin.value = await checkToken();
    if (!islogin.value) {
        return;
    }
    uni.pageScrollTo({ scrollTop: 0 });
    init();
    getCartList();
});

const init = () => {
    //用来解决每次进入页面时记录的还是上一次进入时留下的信息
    activeIndex.value = '';
    hasMore.value = 1;
    pageCount.value = 8;
    scrollTop.value = 0;
    itemTransLateX.value = 0;
    operateParam.checked = false;
    cartList.value = [];
    hasChoose.value = false;
    operateParam.allMoney = 0;
};
const goDetail = item => {
    if (!itemTransLateX.value && !isscroll.value) {
        router.push('/pages-cart/good/index?goodsNo=' + item.goodsNo + '&goodsId=' + item.goodsId);
    } else {
        init();
    }
};
const getCartList = () => {
    if (hasMore.value) {
        show.value = props.show ? true : false;
        props.show ? popup.value.open('bottom') : '';
        request('cartListServ').then(res => {
            res.data.list.forEach((item, index) => {
                res.data.list[index] = { ...item, skuSpecValue: '', checked: false };
                res.data.list[index].skuSpecValue = item.specValueList.map(value => value.attributeValue).join(';');
            });
            cartList.value = res.data.list;
            hasgoods.value = cartList.value.length ? true : false;
            total.value = res.data.totalCount;
            var param = JSON.parse(JSON.stringify(cartList.value));
            if (res.data.totalCount < pageCount.value) {
                pageCart.value = param;
            } else {
                pageCart.value = param.splice(pageCount.value);
                pageCart.value = param;
            }
            if (pageCart.value.length < res.data.totalCount) {
                hasMore.value = 1;
            } else {
                hasMore.value = 0;
            }
            hasMore.value == 1 ? (loading.status = 'loading') : (loading.status = 'nomore');
        });
    }
};
// 下拉刷新
onPullDownRefresh(() => {
    updata();
    setTimeout(function () {
        uni.stopPullDownRefresh();
    }, 1000);
});
// 上拉加载
onReachBottom(() => {
    if (hasMore.value) {
        pageCount.value = pageCount.value * 2;
        var param = JSON.parse(JSON.stringify(cartList.value));
        if (total.value <= pageCount.value) {
            pageCart.value = param;
        } else {
            pageCart.value = param.splice(pageCount.value);
            pageCart.value = param;
        }
        if (pageCart.value.length < total.value) {
            hasMore.value = 1;
        } else {
            hasMore.value = 0;
        }
        hasMore.value == 1 ? (loading.status = 'loading') : (loading.status = 'nomore');
    }
});
const updata = () => {
    uni.pageScrollTo({ scrollTop: 0 });
    init();
    getCartList();
};
const openDialog = data => {
    props.specValueList = JSON.parse(JSON.stringify(data.specValueList));
    props.goodsId = data.goodsId;
    props.goodsNo = data.goodsNo;
    props.skuId = data.skuId;
    props.cartId = data.cartId;
    props.quantity = data.quantity;
    props.coverSrc = data.coverSrc;
    if (data.onSale != 1) {
        uni.showToast({
            title: '此商品已失效！',
            icon: 'none'
        });
        return;
    }
    props.isvalid = data.onSale != 1 || !data.skuStock || data.isDelete == 1 ? false : true;
    // popup.value.open('bottom');
    show.value = true;
};
/** 判断购物车是否全选中*/
const getallcheckStatus = () => {
    const data = pageCart.value.filter(item => item.checked == false);
    return data.length > 0 ? false : true;
};
const AddShoppingList = (type, index) => {
    if (type == 1) {
        if (pageCart.value[index].quantity < pageCart.value[index].skuStock) {
            pageCart.value[index].quantity++;
            updataCart(index);
        }
    } else {
        if (pageCart.value[index].quantity > 1) {
            pageCart.value[index].quantity--;
            updataCart(index);
        }
    }
};
/** 修改购物车*/
const updataCart = index => {
    const { goodsId, quantity, skuId, cartId } = pageCart.value[index];
    request('cartUpdateServ', { goodsId, quantity, skuId, cartId }).then(res => {
        getPrice(pageCart.value);
    });
};
/** 获取选中的cartid*/
const getcartIds = data => {
    let param = [];
    param = data.filter(item => item.checked);
    param = param.map(item => item.cartId);
    return param;
};
/** 全选操作*/
const allChoose = () => {
    operateParam.checked = !operateParam.checked;
    cartList.value.forEach(item => {
        if (item.onSale == 1 && item.skuStock && item.isDelete == 2) {
            item.checked = operateParam.checked;
        }
    });
    getPrice(cartList.value);
};
const choose = index => {
    if (
        [2, 3].includes(pageCart.value[index].onSale) ||
        !pageCart.value[index].skuStock ||
        pageCart.value[index].isDelete == 1
    )
        return;
    cartList.value[index].checked = !cartList.value[index].checked;
    pageCart.value[index].checked = !pageCart.value[index].checked;
    operateParam.checked = getallcheckStatus();
    getPrice(pageCart.value);
};
/**获取总价 */
const getPrice = data => {
    const cartIds = getcartIds(data);
    if (cartIds.length) {
        hasChoose.value = true;
        request('getPriceServ', { cartIds }).then(res => {
            operateParam.allMoney = res.data.price / 100;
        });
    } else {
        hasChoose.value = false;
        operateParam.allMoney = 0;
    }
};
const itemTouchStart = (e, i) => {
    activeIndex.value = i;
    startX.value = e.changedTouches[0].pageX;
    startY.value = e.changedTouches[0].pageY;
    if (!itemTransLateX.value) {
        isscroll.value = false;
    } else {
        isscroll.value = true;
    }
};
const itemTouchEnd = (e, i) => {
    let endX = e.changedTouches[0].pageX;
    let endY = e.changedTouches[0].pageY;
    itemTransLateY.value = endY - startY.value;
    itemTransLateX.value = endX - startX.value;
    //避免上下滑动触发向左滑动商品
    if (itemTransLateY.value < 40 && itemTransLateY.value > -40) {
        itemTransLateX.value = itemTransLateX.value <= -26 ? -144 : 0;
    } else {
        itemTransLateX.value = 0;
    }
    if (!itemTransLateX.value && !isscroll.value) {
        isscroll.value = false;
    } else {
        isscroll.value = true;
    }
};
const move = e => {
    itemTransLateX.value = e.detail.x;
    if (itemTransLateY.value < 20 && itemTransLateY.value > -20) {
        itemTransLateX.value = itemTransLateX.value <= -26 ? -144 : 0;
    } else {
        itemTransLateX.value = itemTransLateX.value <= -26 ? -144 : 0;
    }
};
/**删除购物车 */
const delGoods = (item, index) => {
    const { goodsId, skuId, cartId } = item;
    request('cartdelServ', { goodsId, skuId, cartId }).then(res => {
        pageCart.value.splice(index, 1);
        activeIndex.value = '';
        uni.showToast({
            title: '删除成功！',
            icon: 'none'
        });
    });
};

const toDetail = () => {
    if (!hasChoose.value) return;
    if (operateParam.checked) {
        //全选
        getPayParam(cartList.value);
    } else {
        getPayParam(pageCart.value);
    }
};
const getPayParam = data => {
    let skuList = [];
    let cardIds = [];
    var param = [];
    data.map(el => {
        if (el.checked) {
            cardIds.push(el.cartId);
            skuList.push({
                goodsId: el.goodsId,
                quantity: el.quantity,
                skuId: el.skuId
            });
            param.push({
                productId: el.goodsId,
                num: el.quantity,
                skuId: el.skuId,
                skuName: el.skuSpecValue,
                productName: el.goodsName
            });
        }
    });
    router.push({
        path: '/pages-cart/confirm/index',
        query: {
            type: 2,
            skuList: JSON.stringify(skuList),
            cardIds: JSON.stringify(cardIds)
        }
    });
};
const close = () => {
    popup.value.close();
    show.value = false;
};
const change = type => {
    show.value = type.show;
};
const isBottom = computed(() => {
    return scrollTop.value > 80;
});
onPageScroll(e => {
    scrollTop.value = e.scrollTop;
});
const imageError = index => {
    pageCart.value[index].coverSrc = defaultImg.value;
};
</script>
<style lang="scss" scoped>
movable-area {
    height: 256rpx;
    width: calc(100% - 145rpx);
}
movable-view {
    width: 750rpx;
    height: 256rpx;
    z-index: 9;
    background-color: #fff;
    overflow: hidden;
}
.scroll {
    height: calc(100vh - 90rpx);
}
.btnshop {
    height: 66rpx;
    margin-left: 16rpx;
    background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
    border-radius: 36rpx;
    line-height: 66rpx;
    color: #ffffff;
    font-size: 25rpx;
    width: 180rpx;
}
.disabled {
    color: #ffff !important;
    background: #cccccc !important;
}
.loading {
    padding: 16rpx 0 120rpx 0;
    text-align: center;
    font-size: 28rpx;
    font-weight: 300;
    color: #999999;
    line-height: 22rpx;
}
.bg {
    background-color: #ffff;
}
.search_no {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .denglu {
        width: 297rpx;
        height: 216rpx;
        margin: 312rpx 0 42rpx 0;
    }
    .denglu_title {
        font-size: 29rpx;
        font-weight: 400;
        color: #333333;
        line-height: 40rpx;
    }
    .no_img {
        width: 278rpx;
        height: 160rpx;
        margin: 312rpx 0 24rpx 0;
    }
    .no_title {
        font-size: 24rpx;
        font-weight: 400;
        color: #333333;
        line-height: 34rpx;
    }
}
.del {
    background-color: #fe292b;
    position: absolute;
    width: 145rpx;
    right: 0;
    top: 0;
    z-index: 4;
    height: 100%;
}
.delicon {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
    .iconimg {
        width: 40rpx;
        height: 40rpx;
    }
    .icontext {
        margin-top: 14rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #ffffff;
        line-height: 26rpx;
    }
}
.carpage_goods {
    margin-top: 18rpx;
    padding-left: 28rpx;
    overflow-x: hidden;
    .carpage_square {
        display: flex;
        // padding: 28rpx 0;
        border-bottom: 2rpx solid #f5f5f5;
        &:last-child {
            border: none;
        }

        .img_square {
            position: relative;
            width: 200rpx;
            height: 200rpx;
            left: 0;
            bottom: 0;
            margin-left: 16rpx;
            border-radius: 7rpx;
            flex-shrink: 0;
        }
        .img_logo {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 43rpx;
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 43rpx;
            text-align: center;
            border-radius: 0 0 7rpx 7rpx;
            background: rgba(51, 51, 51, 0.4);
        }

        .carpage_img {
            width: 100%;
            height: 100%;
            border-radius: 8rpx;
            flex-shrink: 0;
        }
        .carpage_detail {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 18rpx;
            padding-right: 28rpx;
            width: 100%;
            .carpage_foodname {
                font-size: 26rpx;
                font-weight: 500;
                color: #33302d;
                line-height: 36rpx;
                word-break: break-all;
            }

            .carpage_stylechoose {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 44rpx;
                width: 162rpx;
                background-color: #f5f5f5;
                margin-top: 10rpx;
                padding: 6rpx 16rpx;
                border-radius: 8rpx;
                .carpage_text {
                    width: 78%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #999999;
                    line-height: 32rpx;
                }
                .carpage_jintou {
                    width: 22rpx;
                    height: 12rpx;
                }
            }
            .carpage_count {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 18rpx;
                .carpage_color {
                    color: #fe292b;
                    font-weight: 600;
                    font-family: PingFangSC-Medium, PingFang SC;
                }
                .price-qian {
                    font-size: 24rpx;
                }
                .price-dian {
                    font-size: 26rpx;
                }
                .carpage_money {
                    font-size: 36rpx;
                    line-height: 40rpx;
                }
                .carpage_item {
                    font-size: 25rpx;
                    font-weight: 400;
                    color: #33302d;
                    line-height: 36rpx;
                }
                .carpage_btn {
                    margin: 0;
                    width: 101rpx;
                    background: #ffffff;
                    border-radius: 65rpx;
                    border: 2rpx solid #fe292b;
                    font-size: 25rpx;
                    font-weight: 400;
                    color: #fe292b;
                    line-height: 58rpx;
                    padding: 0;
                }
            }
        }
    }
}
.tab {
    width: 100%;
    height: 90rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: 0px -2px 4px 0px rgba(153, 153, 153, 0.08);
    .carpage_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 90rpx;
        padding: 0 28rpx;

        .label {
            font-size: 25rpx;
            font-weight: 400;
            color: #333333;
            line-height: 25rpx;
        }
        .space {
            padding-left: 16rpx;
        }
        .carpage_color {
            color: #fe292b;
            font-weight: 600;
            font-family: PingFangSC-Medium, PingFang SC;
            padding-left: 10rpx;
        }
        .price-qian {
            font-size: 24rpx;
        }
        .price-dian {
            font-size: 26rpx;
        }
        .carpage_allcount {
            font-size: 36rpx;
            line-height: 36rpx;
        }
    }
}
</style>
